<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/js/axios.min.js"></script>
<script src="/js/util.js"></script>
<script>
    var id = getQuery("id");
    window.onload = function (){
        findRole();
        findUser();
    }
    function getItem(){
        var idArr = [];
        var chooseList = document.querySelectorAll("#roleDiv [name='roleArray']:checked ")
        for (var i=0;i<chooseList.length;i++){
            idArr.push(chooseList[i].value);
        }

        return idArr;
    }
    function findGrade(){
        var roleArray = getItem();
        if (roleArray.length == 0){
            $('gradeDiv').innerHTML = "";
            return;
        }

        var params = new URLSearchParams();
        params.append("roleArray",roleArray);

        axios.post("/grade/findByRoleArray",params).then(e => {
            var info = e.data;
            var str = "";
            for (var i=0;i<info.length;i++){
                str += info[i].name+"、"
            }
            $('gradeDiv').innerHTML = str;
        })
    }

    /**
     * 查询角色
     */
    async function findRole(){
        await axios.get("/role/findAll",null).then(e => {
            var info = e.data;
            var str = "";
            for (var i=0;i<info.length;i++){
                str += `<input type="checkbox" name="roleArray" value="${info[i].id}">${info[i].name}`
            }
            $('roleDiv').innerHTML = str;
        })
    }

    /**
     * 查询用户
     */
    function findUser(){
        axios.get("/user/findById",{
            params: {
                id
            }
        }).then(e => {
            var info = e.data;
            $('codeSpan').innerHTML = info.code;
            $('nameSpan').innerHTML = info.name;
            var str = "";
            for (var i=0;i<info.gradeList.length;i++){
                str += `${info.gradeList[i].name}、`
            }
            $('gradeDiv').innerHTML = str;
            var arr = info.roleList;

            for (var i=0;i<arr.length;i++){
                var obj = arr[i];
                document.querySelector("#roleDiv [name='roleArray'][value='"+obj.id+"']").checked = true;
            }
        })
    }

    function update(){
        var params = new URLSearchParams();
        params.append("userId",id);
        params.append("roleArray",getItem());
        axios.post("/user/update",params).then(e => {
            if (e.data == "ok"){
                location.href = "/user/user.html"
            }
        })
    }
</script>
<body>
    <h2>修改用户权限</h2>
    用户名:<span id="codeSpan"></span><br>
    真实姓名:<span id="nameSpan"></span><br>
    拥有角色:<div id="roleDiv" onclick="findGrade()"></div>
    拥有权限:<div id="gradeDiv"></div>
    <input type="button" value="修改" onclick="update()">
</body>
</html>